<template>
  <div>
    <van-popup
      v-model="isShowPopup"
      @click-overlay="overlay"
      :close-on-click-overlay="false"
      custom-style="height: 20%, width:100%"
      class="popupContent"
      position="bottom"
    >
      <div class="closePopup" @click="handleClosePopup">
        <svg-icon icon="icon-xiala"></svg-icon>
      </div>
      <div class="analysisTitle">
        <!-- <div class="analysisName">22--{{overlapingItem.orgBranchName}}</div> -->
        <!-- <div class="analysisNumber">{{overlapingItem.list[0].targetValue}}</div> -->
      </div>
      <div class="pupButtonGroup">
        <van-button
          plain
          type="default"
          @click="handleDrilldownButton"
          :class="defaultpupShow === 3 ? 'pupButtonGroupSelect' : 'pupButtonGroupDefault'"
          >下钻</van-button
        >
        <van-button
          plain
          type="default"
          @click="handleOverlappingButton"
          :class="defaultpupShow === 1 ? 'pupButtonGroupSelect' : 'pupButtonGroupDefault'"
          >交叉</van-button
        >
        <van-button plain type="default" @click="handleTrackButton" class="pupButtonGroupDefault">追踪</van-button>
      </div>
      <div :class="defaultpupShow === 0 ? 'detailPopup' : 'detailPopupLine'"></div>
      <div>
        <transition name="fadeHeight" mode="out-in">
          <div v-if="defaultpupShow === 1">
            <overlapping
              @closepup="handleClosepup"
              @overLappingDetermine="handleOverLappingDetermine"
              :pupValue="pupValue"
            ></overlapping>
          </div>
          <div v-if="defaultpupShow === 3">
            <drilldown
              @closepup="handleClosepup"
              :pupValue="pupValue"
              @drilldownDetermine="handleDrilldownDetermine"
            ></drilldown>
          </div>
        </transition>
      </div>
    </van-popup>
  </div>
</template>

<script>
import overlapping from './overlapping.vue'
import drilldown from './drilldown.vue'
export default {
  props: ['isShowPopup', 'overlapingItem', 'fields', 'pupValue', 'dataContent', 'modifyPup'],
  components: {
    overlapping,
    drilldown
  },
  data() {
    return {
      defaultpupShow: 0
    }
  },
  methods: {
    handleDrilldownButton() {
      this.defaultpupShow = 3
    },
    handleOverlappingButton() {
      this.defaultpupShow = 1
    },
    handleTrackButton() {
      // Toast.success('追踪成功')
    },
    overlay() {
      this.$emit('closeDetailPup', false)
      this.defaultpupShow = 0
    },
    handleClosePopup() {
      this.$emit('closeDetailPup', false)
      this.defaultpupShow = 0
    },
    handleClosepup(data) {
      this.$emit('closeDetailPup', data)
      this.defaultpupShow = 0
    },
    handleOverLappingDetermine(isClose, activeId) {
      this.$emit('overLappingPuPDetermine', isClose, activeId)
      this.defaultpupShow = 0
    },
    handleDrilldownDetermine(isClose, activeId) {
      this.$emit('drilldownPuPDetermine', isClose, activeId)
      this.defaultpupShow = 0
    }
  },
  watch: {
    dataContent(val) {
      // this.initData()
    },
    modifyPup(val) {
      this.defaultpupShow = val
    }
  }
}
</script>

<style lang="scss" scoped>
.popupContent {
  width: 100%;
  background-color: #092d7e;
  border-radius: 20px 20px 0px 0px;
  .closePopup {
    line-height: 36px;
    text-align: center;
    opacity: 0.64;
  }
  .analysisTitle {
    width: 335px;
    margin: 0px auto;
    background-color: #032571;
    padding: 14px 16px 6px 16px;
    .analysisName {
      font-size: 18px;
      font-weight: 600;
    }
    .analysisNumber {
      color: #ffb440;
      line-height: 38px;
      font-size: 28px;
      // padding: 1px 0px 6px 0px;
    }
  }
  .pupButtonGroup {
    padding-top: 16px;
    display: flex;
    justify-content: space-around;
    .pupButtonGroupSelect {
      background-color: #025cea;
      color: #fff;
      height: 44px;
      width: 102px;
      font-size: 16px;
    }
    .pupButtonGroupDefault {
      height: 44px;
      width: 102px;
      font-size: 16px;
    }
  }
  .detailPopupLine {
    width: 375px;
    height: 1px;
    background: #0c144b;
    margin: 20px 0px;
  }
  .detailPopup {
    margin: 20px 0px;
  }
  .fadeHeight-enter-active,
  .fadeHeight-leave-active {
    transition: all 0.5s;
    max-height: 314px;
  }
  .fadeHeight-enter,
  .fadeHeight-leave-to {
    max-height: 0px;
  }
}
</style>
